<template>
	<view>
		<u-navbar title=" " :border-bottom="false">
			<view class="slot-wrap">
				<view class="box">
					<view :class="[index == navIndex ? 'active' :'']" @click="navIndex = index;choiceNavTab()" v-for="(item,index) in navChoices"
					 :key="index">{{item}}</view>
				</view>
			</view>
		</u-navbar>
		<view class="tab" :style="{
				top:uTabOffsetTop + 'px'
			}">
			<view>
				<u-tabs font-size="28" :bar-style="{'border-radius':'4rpx'}" active-color="#F4B802" :list="myCardTab" :is-scroll="false"
				 :current="myCardTabIndex" @change="onMyCardTabChange"></u-tabs>
			</view>
			<view class="btn" @click="show = true" v-if="navIndex == 0">
				<u-icon :name="appletImgUrl+'card-choice-icon.png'" width="26" height="26"></u-icon>
				<text>筛选</text>
			</view>

		</view>

		<view class="vip-card-list" v-if="myCardTabIndex == 0 && navIndex == 0">
			<view class="item" v-for="(item,index) in list" :key="index">
				<u-image :show-loading="false" :src="item.bg" width="100%" height="290"></u-image>
				<view class="item-box">
					<u-image borStyle="3rpx solid #ffffff" :src="imageURL+ item.imgLogo" width="68" height="68" shape="circle"></u-image>
					<view class="info-box" @click="setVipCardData(item)">
						<view class="upper">
							<view>{{item.merchantAlias}}</view>
							<view><text>{{percentOff(item.percentOff)}}</text>折</view>
						</view>
						<view class="lower">
							<view>{{item.title}}</view>
							<view class="desc"><text>{{item.vipDayDesc}}</text></view>
							<view>{{item.priceAvailableDesc}}
								<view>详情 <u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<view class="state" @click="openMap(item)">
						<text v-if="item.status == 1">立即使用</text>
						<text v-else style="color: #AAAAAA;">{{item.statusDesc}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon-list" v-if="myCardTabIndex == 1 && navIndex == 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="$u.route('/pages/other/setmeal/setmeal',{
							id:item.sharePackageId,
							type:'setMeal',
							showCodeBtn:item.status == 20 ? 1 : 0,
							coordinate:coordinateString,
							orderNumber:item.status == 20 ?item.orderNumber : ''
						})">
				<u-image width="100%" height="400" :src="imageURL + item.sharePackageImg"></u-image>
				<view v-if="item.status == 20" class="tag" @click.stop="setStorageSync(item)">
					展示二维码
				</view>
				<view v-if="item.status == 30" class="tag" style="
					background: linear-gradient(90deg, #FF3768, #FC6161);
					box-shadow: 0px 20rpx 30rpx 0px rgba(254, 65, 102, 0.35);">
					去购买
				</view>
				<view class="right-tip" v-if="item.status != 20">
					{{item.statusDesc}}
				</view>
				<view class="info">
					<view class="name">
						{{item.merchantName}}
					</view>
					<view class="text">
						{{item.useDayDesc}}
					</view>
					<text class="text">活动时间：{{item.validStartTime}} - {{item.validEndTime || '长期'}}</text>
					<view class="tip">
						<view>{{item.title}}</view>
						<text>距离：{{item.distance || '未知'}}</text>
					</view>
					<view class="other">
						<view>
							<view><text>￥</text>{{item.packagePrice}}</view>
							<view class="original-price">￥{{item.orignPrice}}</view>
							<view class="other-tag">{{item.shareRebateDesc}}</view>
						</view>
						<view>
							更多详情
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon-list" v-if="myCardTabIndex == 2 && navIndex == 0">
			<view class="item" v-for="(item,index) in list" :key="index" @click="$u.route('/pages/other/setmeal/setmeal',{
							id:item.couponId,
							type:'coupon',
							showCodeBtn:item.status == 20 ? 1 : 0,
							coordinate:coordinateString,
							orderNumber:item.status == 20 ?item.orderNumber : ''
						})">
				<u-image width="100%" height="400" :src="imageURL + item.couponImg"></u-image>
				<view v-if="item.status == 20" class="tag" @click.stop="setStorageSync(item)">
					展示二维码
				</view>
				<view v-if="item.status == 30" class="tag" style="
					background: linear-gradient(90deg, #FF3768, #FC6161);
					box-shadow: 0px 20rpx 30rpx 0px rgba(254, 65, 102, 0.35);">
					去购买
				</view>
				<view class="right-tip" v-if="item.status != 20">
					{{item.statusDesc}}
				</view>
				<view class="info">
					<view class="name">
						{{item.merchantName}}
					</view>
					<view class="text">
						{{item.useDayDesc}}
					</view>
					<text class="text">活动时间：{{item.validStartTime}} - {{item.validEndTime || '长期'}}</text>
					<view class="tip">
						<view>{{item.title}}</view>
						<text>距离：{{item.distance || '未知'}}</text>
					</view>
					<view class="other">
						<view>
							<view><text>￥</text>{{item.price}}</view>
							<view class="other-tag">抵扣￥{{item.priceOff}}</view>
							<view class="other-tag">{{item.shareRebateDesc}}</view>
						</view>
						<view>
							更多详情
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon-list" v-if="myCardTabIndex == 0 && navIndex == 1">
			<view class="item" v-for="(item,index) in list" :key="index" @click="$u.route('/pages/other/setmeal/setmeal',{
							id:item.sharePackageId,
							type:'setMeal',
							coordinate:coordinateString,
							showShareData:1
						})">
				<u-image width="100%" height="400" :src="imageURL + item.sharePackageImg"></u-image>
				<view v-if="item.status == 1" class="tag" style="
					background: linear-gradient(90deg, #FF3768, #FC6161);
					box-shadow: 0px 20rpx 30rpx 0px rgba(254, 65, 102, 0.35);">
					去购买
				</view>
				<view class="right-tip" v-if="item.status != 1">
					{{item.statusDesc}}
				</view>
				<view class="info">
					<view class="name">
						{{item.merchantName}}
					</view>
					<view class="text">
						{{item.useDayDesc}}
					</view>
					<text class="text">活动时间：{{item.validStartTime}} - {{item.validEndTime || '长期'}}</text>
					<view class="tip">
						<view>{{item.title}}</view>
						<text>距离：{{item.distance || '未知'}}</text>
					</view>
					<view class="other">
						<view>
							<view><text>￥</text>{{item.packagePrice}}</view>
							<view class="original-price">￥{{item.orignPrice}}</view>
							<view class="other-tag">{{item.shareRebateDesc}}</view>
						</view>
						<view>
							更多详情
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="coupon-list" v-if="myCardTabIndex == 1 && navIndex == 1">
			<view class="item" v-for="(item,index) in list" :key="index" @click="$u.route('/pages/other/setmeal/setmeal',{
							id:item.couponId,
							type:'coupon',
							showCodeBtn:item.status == 20 ? 1 : 0,
							coordinate:coordinateString,
							showShareData:1
						})">
				<u-image width="100%" height="400" :src="imageURL + item.couponImg"></u-image>
				<view class="tag" v-if="item.status == 1" style="
					background: linear-gradient(90deg, #FF3768, #FC6161);
					box-shadow: 0px 20rpx 30rpx 0px rgba(254, 65, 102, 0.35);">
					去购买
				</view>
				<view class="right-tip" v-if="item.status != 1">
					{{item.statusDesc}}
				</view>
				<view class="info">
					<view class="name">
						{{item.merchantName}}
					</view>
					<view class="text">
						{{item.useDayDesc}}
					</view>
					<text class="text">活动时间：{{item.validStartTime}} - {{item.validEndTime || '长期'}}</text>
					<view class="tip">
						<view>{{item.title}}</view>
						<text>距离：{{item.distance || '未知'}}</text>
					</view>
					<view class="other">
						<view>
							<view><text>￥</text>{{item.price}}</view>
							<view class="other-tag">抵扣￥{{item.priceOff}}</view>
							<view class="other-tag">{{item.shareRebateDesc}}</view>
						</view>
						<view>
							更多详情
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-gap></u-gap>
		<u-loadmore :status="status" />
		<u-gap></u-gap>
		<u-popup border-radius="40" v-model="show" mode="top">
			<view class="popup">
				<view class="nav"></view>
				<view class="title">
					筛选
				</view>
				<view class="item-box">
					<view :class="['item',index == popupTabIndex ? 'active' : '']" v-for="(item,index) in choiceTab" :key="index"
					 @click="popupTabIndex = index">
						{{item}}
						<view class="bg" v-if="index == popupTabIndex">
							<!-- <u-image mode="scaleToFill" :show-loading="false" src="/static/card-tab-choice-active-bg.png" width="100%"
							 height="80"></u-image> -->
							 <image :src="appletImgUrl+'card-tab-choice-active-bg.png'"></image>
						</view>
					</view>
				</view>
				<view class="btn" @click="filterData">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import WSCoordinate from '@/js_sdk/WSCoordinate'
	import QQMapWX from "@/common/qqmap-wx-jssdk.min"
	let qqmapsdk = ''
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				uTabOffsetTop: 44 + uni.getSystemInfoSync().statusBarHeight,
				show: false,
				navChoices: ['我的卡包', '分享卡券'],
				navIndex: 0,
				myCardTabIndex: 0,
				status: 'loading',
				imageURL: this.imageURL,
				popupTabIndex: null,
				choiceTab: [
					'有效',
					'无效'
				],
				myCardTab: [{
						name: '会员卡'
					},
					{
						name: '优惠套餐'
					},
					{
						name: '优惠券'
					}
				],
				list: [],
				coordinateString: ''
			};
		},
		onLoad(options) {
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			if (options.myCardTabIndex) {
				this.myCardTabIndex = options.myCardTabIndex
				if (this.myCardTabIndex == 1 || this.myCardTabIndex == 2) {
					this.choiceTab = [
						'未核销',
						'已核销',
						'已过期',
						'全部'
					]
				}
			}
			this.pageNo = 1
			this.statusList = null
			const self = this
			if (this.myCardTabIndex == 1) {
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					success(even) {
						self.coordinate = {
							latitude: even.latitude,
							longitude: even.longitude
						}
						self.coordinateString = JSON.stringify(self.coordinate)
						self.getList(res => {
							self.list = res
							self.status = res.length < 10 ? 'nomore' : 'loadmore'
						})
					},
					fail() {
						self.getList(res => {
							self.list = res
							self.status = res.length < 10 ? 'nomore' : 'loadmore'
						})
					}
				})
			} else {
				self.getList(res => {
					self.list = res
					self.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
			}
		},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.pageNo++
			this.status = 'loading'
			this.getList(res => {
				if (res == '') {
					this.status = 'nomore'
					return
				}
				this.list = this.list.concat(res)
				this.status = 'loadmore'
			})
		},
		methods: {
			
			setStorageSync(item) {
				uni.setStorageSync('writeOffData', item)
				this.$u.route('/pages/other/writeOff/writeOff', {
					orderNumber: item.orderNumber
				});
			},
			choiceNavTab() {
				this.myCardTab = this.navIndex == 0 ? [{
							name: '会员卡'
						},
						{
							name: '优惠套餐'
						},
						{
							name: '优惠券'
						}
					] : [{
						name: '优惠套餐'
					}, {
						name: '优惠券'
					}],
					this.myCardTabIndex = 0
				this.pageNo = 1
				this.status = 'loading'
				this.list = []
				this.choiceTab = [
					'有效',
					'无效'
				]
				this.getList(res => {
					this.list = res
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
			},
			filterData() {
				if (this.popupTabIndex == null) {
					uni.showToast({
						title: '请选择上方选项',
						icon: 'none'
					});
					return
				}
				this.pageNo = 1
				this.status = 'loading'
				if (this.navIndex == 0) {
					if (this.myCardTabIndex == 0) {
						this.statusList = this.popupTabIndex == 0 ? [1] : [0, 3, 2, 4, 5]
					}
					if (this.myCardTabIndex == 1 || this.myCardTabIndex == 2) {
						let statusCode;
						switch (this.popupTabIndex) {
							case 0:
								statusCode = [20]
								break
							case 1:
								statusCode = [30]
								break
							case 2:
								statusCode = [40]
								break
							case 3:
								statusCode = null
						}
						this.statusList = statusCode
					}
				}
				this.getList(res => {
					this.list = res
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
				this.show = false
			},
			setVipCardData(item) {
				if (item.status != 1) return
				item.logo = this.imageURL + item.imgLogo
				uni.setStorageSync('vipCardData', item)
				this.$u.route('/pages/other/vipCardDetail/vipCardDetail', {
					source: 'myCard'
				})
			},
			openMap(item) {
				if (item.status != 1) {
					uni.showToast({
						title: item.statusDesc,
						icon: 'none'
					});
					return
				}
				let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
				uni.openLocation({
					latitude: GCJ_Coordinate.latitude,
					longitude: GCJ_Coordinate.longitude,
					name: item.merchantAlias,
					address: item.merchantAddress
				})
			},
			percentOff(number) {
				return number == undefined ? 0 : Math.floor((number * 10) * 100) / 100
			},
			getList(successCallBack) {
				const self = this
				if (this.navIndex == 0) {
					if (this.myCardTabIndex == 0) {
						this.getVipCardData(res => {
							successCallBack(res)
						})
					}
					if (this.myCardTabIndex == 1 || this.myCardTabIndex == 2) {
						if (self.coordinate) {
							if (self.myCardTabIndex == 1) {
								self.getSetMealData(res => {
									successCallBack(res)
								})
							} else {
								self.getCouponData(res => {
									successCallBack(res)
								})
							}
							return
						}
						uni.getLocation({
							type: 'gcj02',
							altitude: true,
							success(even) {
								self.coordinate = {
									latitude: even.latitude,
									longitude: even.longitude
								}
								self.coordinateString = JSON.stringify(self.coordinate)
								if (self.myCardTabIndex == 1) {
									self.getSetMealData(res => {
										successCallBack(res)
									})
								} else {
									self.getCouponData(res => {
										successCallBack(res)
									})
								}
							},
							fail() {
								if (self.myCardTabIndex == 1) {
									self.getSetMealData(res => {
										successCallBack(res)
									})
								} else {
									self.getCouponData(res => {
										successCallBack(res)
									})
								}
							}
						})
					}
				} else {
					if (self.coordinate) {
						if (self.myCardTabIndex == 1) {
							self.getShareCouponData(res => {
								successCallBack(res)
							})
						} else {
							self.getShareSetMealData(res => {
								successCallBack(res)
							})
						}
						return
					}
					uni.getLocation({
						type: 'gcj02',
						altitude: true,
						success(even) {
							self.coordinate = {
								latitude: even.latitude,
								longitude: even.longitude
							}
							self.coordinateString = JSON.stringify(self.coordinate)
							if (self.myCardTabIndex == 1) {
								self.getShareCouponData(res => {
									successCallBack(res)
								})
							} else {
								self.getShareSetMealData(res => {
									successCallBack(res)
								})
							}
						},
						fail() {
							if (self.myCardTabIndex == 1) {
								self.getShareCouponData(res => {
									successCallBack(res)
								})
							} else {
								self.getShareSetMealData(res => {
									successCallBack(res)
								})
							}
						}
					})
				}
			},
			getShareCouponData(successCallBack) {
				this.$u.post('coupon/listShareCoupon', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					let arr = []
					if (res.list != '') {
						res.list.forEach(item=>{
							let transformationArray = item.couponImg.split(',');
							item.couponImg = transformationArray[0];
						})
						if (this.coordinate) {
							const self = this
							res.list.forEach(item => {
								let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
								qqmapsdk.calculateDistance({
									from: `${self.coordinate.latitude},${self.coordinate.longitude}`,
									to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
									success({
										result
									}) {
										let {
											elements
										} = result
										let distance = elements[0].distance
										distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
											'公里'
										item.distance = distance
										arr.push(item)
									}
								})
							})
						}
					} else {
						arr = res.list
					}
					successCallBack(arr)
				}).catch(error => {
					this.status = 'nomore'
				})
			},
			getShareSetMealData(successCallBack) {
				this.$u.post('sharepackage/listPushSharePackage', {
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					let arr = []
					if (res.list != '') {
						res.list.forEach(item=>{
							let transformationArray = item.sharePackageImg.split(',');
							item.sharePackageImg = transformationArray[0];
						})
						if (this.coordinate) {
							const self = this
							res.list.forEach(item => {
								let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
								qqmapsdk.calculateDistance({
									from: `${self.coordinate.latitude},${self.coordinate.longitude}`,
									to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
									success({
										result
									}) {
										let {
											elements
										} = result
										let distance = elements[0].distance
										distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
											'公里'
										item.distance = distance
										arr.push(item)
									}
								})
							})
						}
					} else {
						arr = res.list
					}
					successCallBack(arr)
				}).catch(error => {
					this.status = 'nomore'
				})
			},
			getCouponData(successCallBack) {
				this.$u.post('coupon/listCouponCard', {
					pageNo: this.pageNo,
					pageSize: 10,
					statusList: this.statusList
				}).then(res => {
					let arr = []
					if (res.list != '') {
						res.list.forEach(item=>{
							let transformationArray = item.couponImg.split(',');
							item.couponImg = transformationArray[0];
						})
						if (this.coordinate) {
							const self = this
							res.list.forEach(item => {
								let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
								qqmapsdk.calculateDistance({
									from: `${self.coordinate.latitude},${self.coordinate.longitude}`,
									to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
									success({
										result
									}) {
										let {
											elements
										} = result
										let distance = elements[0].distance
										distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
											'公里'
										item.distance = distance
										arr.push(item)
									}
								})
							})
						}
					} else {
						arr = res.list
					}
					successCallBack(arr)
				}).catch(error => {
					this.status = 'nomore'
				})
			},
			getSetMealData(successCallBack) {
				this.$u.post('sharepackage/listDrawSharePackage', {
					pageNo: this.pageNo,
					pageSize: 10,
					statusList: this.statusList
				}).then(res => {
					let arr = []
					if (res.list != '') {
						res.list.forEach(item=>{
							let transformationArray = item.sharePackageImg.split(',');
							item.sharePackageImg = transformationArray[0];
						})
						if (this.coordinate) {
							const self = this
							res.list.forEach(item => {
								let GCJ_Coordinate = WSCoordinate.transformFromBaiduToGCJ(item.latitude, item.longitude);
								qqmapsdk.calculateDistance({
									from: `${self.coordinate.latitude},${self.coordinate.longitude}`,
									to: `${GCJ_Coordinate.latitude},${GCJ_Coordinate.longitude}`,
									success({
										result
									}) {
										let {
											elements
										} = result
										let distance = elements[0].distance
										distance = distance < 1000 ? distance + '米' : (Math.round(distance / 100) / 10).toFixed(1) +
											'公里'
										item.distance = distance
										arr.push(item)
									}
								})
							})
						}
					} else {
						arr = res.list
					}
					successCallBack(arr)
				}).catch(error => {
					this.status = 'nomore'
				})
			},
			getVipCardData(successCallBack) {
				this.$u.post('vipcardtemplate/userVipCardList', {
					pageNo: this.pageNo,
					pageSize: 10,
					statusList: this.statusList
				}).then(res => {
					if (res.list != '') {
						let bgArr = ['https://photo.hiyipin.net/USER/fce18b57-88d0-4307-9b14-39d1a8548b3c.png', 'https://photo.hiyipin.net/USER/098603b4-28f4-49c6-a828-2242d5b421af.png', 'https://photo.hiyipin.net/USER/d2f87721-aacc-4541-ab26-369c68689ba2.png', 'https://photo.hiyipin.net/USER/e7b2fa94-ac5c-4f8a-adaa-f211a6c1b988.png',
							'https://photo.hiyipin.net/USER/6c76f088-dbfa-406d-ad42-e6c40e909e2a.png', 'https://photo.hiyipin.net/USER/adc0b9eb-9766-4f96-81d6-83a7b0bca4e4.png'
						]
						res.list.forEach(item => {
							let index = Math.floor(Math.random() * bgArr.length);
							item.bg = bgArr[index]
						})
					}
					successCallBack(res.list)
				}).catch(error => {
					this.status = 'nomore'
				})
			},
			onMyCardTabChange(e) {
				this.myCardTabIndex = e;
				this.pageNo = 1
				this.status = 'loading'
				this.list = []
				this.popupTabIndex = null
				this.statusList = null
				if (this.myCardTabIndex == 0) {
					this.choiceTab = [
						'有效',
						'无效'
					]
				}
				if (this.myCardTabIndex == 1 || this.myCardTabIndex == 2) {
					this.choiceTab = [
						'未核销',
						'已核销',
						'已过期',
						'全部'
					]
				}
				this.getList(res => {
					this.list = res
					this.status = res.length < 10 ? 'nomore' : 'loadmore'
				})
			}
		}
	}
</script>

<style lang="scss">
	.vip-card-list {
		.item {
			position: relative;
			height: 260rpx;

			.item-box {
				.state {
					width: 88rpx;
					writing-mode: tb-rl;
					display: flex;
					font-size: 30rpx;
					align-items: center;
					justify-content: center;
					color: #F44B17;

					text {
						// line-height: 40rpx;
						letter-spacing: 13rpx
					}
				}

				position: absolute;
				width: 690rpx;
				height: 230rpx;
				left: 30rpx;
				bottom: 0;
				display: flex;
				padding: 30rpx;
				padding-right: 0;

				.info-box {
					color: #fff;
					padding: 0 20rpx;
					flex: 1;

					.lower {
						font-size: 24rpx;

						>view {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 5rpx;
						}

						.desc {
							width: 450rpx;

							text {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}

					.upper {
						position: relative;
						padding-top: 10rpx;
						margin-bottom: 10rpx;

						view {

							&:first-child {
								font-size: 36rpx;
								width: 370rpx;
								font-weight: bold;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							&:last-child {
								font-size: 30rpx;
								font-weight: normal;
								position: absolute;
								right: 0;
								top: 50%;
								transform: translateY(-50%);

								text {
									font-size: 60rpx;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}

	.popup {
		padding-bottom: 50rpx;
		padding-top: 44px;

		.nav {
			height: var(--status-bar-height);
		}

		.btn {
			width: 280rpx;
			margin: 0 auto;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FF7200, #FECD62);
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			margin-top: 65rpx;
			border-radius: 40rpx;
		}

		.item-box {
			padding: 0 15rpx;

			.item {
				margin: 15rpx;
				text-align: center;
				display: inline-block;
				width: 210rpx;
				height: 80rpx;
				background-color: #F8F8F8;
				line-height: 80rpx;
				border-radius: 10rpx;
				position: relative;

				&.active {
					color: #FF9829;
				}

				.bg {
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					image{
						width: 100%;
						vertical-align: middle;
						height: 100%;
					}
				}
			}
		}

		.title {
			font-size: 36rpx;
			text-align: center;
			padding: 40rpx 0;
		}
	}

	.coupon-list {
		margin: 0 30rpx;

		.item {
			border-radius: 20rpx;
			position: relative;
			z-index: 1;
			overflow: hidden;
			box-shadow: 0px 5rpx 25rpx rgba(0, 0, 0, .1);
			margin-top: 30rpx;

			.right-tip {
				position: absolute;
				right: 0;
				top: 0;
				z-index: 1;
				line-height: 60rpx;
				padding: 0 20rpx;
				background-color: #AAAAAA;
				border-bottom-left-radius: 20rpx;
				color: #FFFFFF;
			}

			.tag {
				position: absolute;
				top: 366rpx;
				right: 30rpx;
				line-height: 68rpx;
				background: linear-gradient(90deg, #FF7200, #FEB20B);
				font-size: 30rpx;
				color: #fff;
				padding: 0 30rpx;
				font-weight: 800;
				box-shadow: 0px 20rpx 30rpx 0px rgba(255, 141, 5, 0.35);
				border-radius: 34rpx;
			}

			.info {
				padding: 20rpx;

				.other {
					display: flex;
					justify-content: space-between;
					align-items: center;

					>view {
						&:first-child {
							display: flex;
							align-items: center;

							>view {
								&:first-child {
									color: #F44B17;
									font-size: 48rpx;
									font-weight: bold;

									text {
										font-weight: normal;
										font-size: 30rpx;
									}
								}

								&.original-price {
									color: #AAAAAA;
									font-size: 24rpx;
									margin-left: 15rpx;
									text-decoration: line-through;
								}

								&.other-tag {
									background-color: rgba($color: #F44B17, $alpha: .1);
									line-height: 40rpx;
									font-size: 24rpx;
									color: #F44B17;
									padding: 0 15rpx;
									border-radius: 20rpx;
									margin-left: 15rpx;
								}
							}
						}

						&:last-child {
							color: #F44B17;
							font-size: 24rpx;
						}

					}

				}

				.tip {
					display: flex;
					margin-top: 10rpx;
					justify-content: space-between;
					font-size: 30rpx;
					font-weight: 800;
					align-items: center;

					>view {
						flex: 1;
					}

					text {
						color: #AAAAAA;
						font-size: 24rpx;
						font-weight: normal;
					}
				}

				.text {
					font-size: 24rpx;
					color: #aaa;
				}

				.name {
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}
			}
		}
	}

	.tab {
		display: flex;
		align-items: center;
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: #FFFFFF;

		>view {
			&:first-child {
				flex: 1;
			}

			&.btn {
				padding-right: 30rpx;
				display: flex;
				align-items: center;
				color: #F4B802;

				text {
					margin-left: 10rpx;
				}
			}
		}

	}

	.slot-wrap {
		width: 320rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);

		.box {
			display: flex;
			justify-content: center;
			border-radius: 10rpx;
			overflow: hidden;
			background-color: #F8F8F8;

			>view {
				width: 160rpx;
				text-align: center;
				line-height: 64rpx;
				background-color: #F8F8F8;

				&.active {
					color: #fff;
					background-color: #F4B802;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
